﻿<!doctype html>
<html>

<head>
    <title>{title}</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
    <link href="/css/weui.css" rel="stylesheet" type="text/css" />
    <link href="/css/base.css" rel="stylesheet" type="text/css" />
    <link href="/css/icon.css" rel="stylesheet" type="text/css" />
    <link href="/css/umc.ui.css" rel="stylesheet" type="text/css" />
    <link href="/css/umc.css" rel="stylesheet" type="text/css" />
    <link href="/css/auth.css" rel="stylesheet" type="text/css" />
  
    <script src="/js/umc.js" type="text/javascript"></script>

    <script src="/UMC.Conf" type="text/javascript"></script>
    <script>

        UMC(function ($) {


            $.UI.Off('Prompt').On("Prompt", function (e, p) {
                var msg = $('.el-message').removeClass('el-message-fade-leave-active');
                msg.find('.el-message__content').html(p.Text);
                setTimeout(function () {
                    msg.addClass('el-message-fade-leave-active');
                }, 3000);
            }).On("User", function () {
                var v = UMC.query(location.search.substring(1));
                if (v.oauth_callback) {
                    location.href = v.oauth_callback;
                } else {
                    location.reload(true);
                }
            });

            var login = $('.login-container');
            login.find('.loginFunc').click(function () {
                var mp = $(this).parent().cls('scanning');

                login.on(mp.is('.scanning') ? "connect" : 'disconnect');
            });
            var root = $('.login-container');
            login.find('form').submit(function () {
                var v = $(this).val();
                $.UI.Command('Account', "Login", v);
                return false;
            });
            $.UI.Command("Account", "Check", "Session", function (xhr) {
                $.UI.Device = xhr.Device;

                new QRCode(document.getElementById("qrcode"), {
                    width: 200,
                    height: 200
                }).makeCode([UMC.UI.Config().domain || location.origin, '/Auth?', xhr.Device].join(''));
                $.UI.API("Account", "Check", 'Mqtt', function (cfg) {

                    if (!cfg.client) {

                        login.find(".qrcode_view .context").html("<a>请尝试刷新</a>");
                        login.find('.loginFunc').click();
                        return;
                    }
                    var client = new Paho.MQTT.Client(cfg.broker, 443, cfg.client);
                    client.onConnectionLost = function () { };
                    login.find(".context").click('a', function () {
                        UMC.UI.Command("Account", "Check", "Session");
                        login.on("connect");
                    });


                    var timeId = 0;
                    client.onMessageArrived = function (message) {
                        var uss = [].concat(JSON.parse(message.payloadString))[0];
                        if (uss.msg) {
                            if (uss.msg == 'OK') {
                                UMC.UI.Command("Account", "Check", "Session");
                            } else {
                                clearTimeout(timeId);
                                login.find(".qrcode_view .context").html(['<b>', uss.msg, '</b>'].join(''));
                                timeId = setTimeout(function () {
                                    login.on('disconnect');
                                    UMC.UI.Command("Account", "Check", "Session");
                                }, 60000);
                            }
                        }

                    };

                    login.on('disconnect', function () {
                        clearTimeout(timeId);
                        login.find(".qrcode_view .context").html("<a>刷新二维码</a>");
                        client.disconnect();
                    }).on('connect', function () {
                        client.connect({
                            useSSL: true,
                            userName: cfg.user,
                            password: cfg.pass,
                            onSuccess: function () {
                                login.find(".qrcode_view .context").children().remove();
                                timeId = setTimeout(function () {
                                    login.on('disconnect');
                                    UMC.UI.Command("Account", "Check", "Session");
                                }, 60000);
                            },
                            mqttVersion: 4,
                            onFailure: function (e) {
                                login.find(".qrcode_view .context").html("<a>扫码错误，请刷新</a>");
                            }
                        });
                    });

                    login.on(UMC.query(location.search.substring(1)).un ? 'disconnect' : 'connect');
                });

            });

        })</script>
    <script src="/js/mqttws31.min.js?v.01"></script>
    <script src="/js/qrcode.min.js?v.01"></script>

</head>

<body>
    <div role="alert" class="el-message el-message--warning el-message-fade-leave el-message-fade-leave-active" style="z-index: 2100;">
        <i class="el-message__icon el-icon-success"></i>
        <p class="el-message__content"></p>
    </div>
    <div class="login-container">
        <form class="el-form login-form el-form--label-left scanning" style="border-radius: 6px; box-shadow: 0 4px 8px 0 rgba(42, 93, 158, .16), 0 0 4px 0 rgba(42, 93, 158, .08); background-color: #fff;width: 300px;" autocomplete="on">
            <div class="loginFunc">
                <div class="qrcode"></div>
                <div class="account"></div>
            </div>
            <div class="title-container" style="padding-top:15px; margin-bottom:15px">
                欢迎使用 {title}！
            </div>
            <div class="qrcode_view" style="top: 28%;">
                <div style="width: 200px; height: 200px; margin: auto; position: relative;">
                    <div class="context"></div>
                    <div id="qrcode"></div>
                    <!--[if IE]> 不支持IE内核的浏览器，推荐使用chrome .如果使用360请切换极速模式<![endif]-->
                </div>
                <div style="text-align: center;background-color: #fff;padding: 30px 0;">
                    请使用钉钉扫描二维码登录
                </div>
            </div>
            <div class="el-form-item user el-input">
                <input tabindex="1" type="text" required="" autocomplete="on" placeholder="账号" name="Username" class="el-input__inner">

            </div><div class="el-form-item password el-input" tabindex="0">

                <input tabindex="2" type="password" autocomplete="on" placeholder="密码" name="Password" class="el-input__inner">
            </div><button type="submit" class="el-button el-button--primary el-button--default" style="width: 100%; margin-bottom: 30px;">登录</button>
        </form>
    </div>
    <a id="ICPFiling" href="https://beian.miit.gov.cn" target="_blank"></a>
</body>

</html>